<?php
// CTA组件 - 通用配置化调用，支持多种样式和主题

// 确定要使用的配置键
$configKey = isset($configKey) ? $configKey : 'cta';

// 获取组件配置
$defaultConfig = [
    'section_id' => 'cta-section',
    'section_title' => '准备好开始了吗？',
    'section_subtitle' => '立即行动，开启您的全新体验',
    'primary_button_text' => '立即开始',
    'primary_button_link' => '#',
    'primary_button_icon' => 'fa-arrow-right',
    'primary_button_type' => 'border-primary text-primary',
    'secondary_button_text' => '了解更多',
    'secondary_button_link' => '#',
    'secondary_button_icon' => 'fa-info-circle',
    'secondary_button_type' => 'border-gray-300 text-gray-700',
    'text_alignment' => 'center', // left, center, right
    'padding' => 'py-16 md:py-24',
    'shadow' => false,
    'max_width' => 'max-w-4xl'
];

// 合并默认配置和页面配置
$data = array_merge($defaultConfig, $pageConfig['components'][$configKey] ?? []);

// 处理文本颜色（移除背景相关判断）
$textColorClass = 'text-gray-900';
$subtitleColorClass = 'text-gray-600';

// 处理对齐方式
$alignmentClass = 'text-' . $data['text_alignment'];
$flexAlignmentClass = $data['text_alignment'] === 'center' ? 'justify-center' : 'justify-' . $data['text_alignment'];

// 处理阴影
$shadowClass = $data['shadow'] ? 'shadow-xl' : '';
$baseClass = 'px-6 py-3 font-medium rounded-lg transition-all duration-300 flex items-center ';

?>

<!-- 通用CTA区域 -->
<section 
    id="<?php echo htmlspecialchars($data['section_id']); ?>" 
    class="<?php echo $data['padding']; ?> relative overflow-hidden <?php echo $shadowClass; ?>">
    
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="<?php echo $data['max_width']; ?> mx-auto <?php echo $alignmentClass; ?>">
            <!-- 标题 -->
            <h2 class="text-3xl md:text-4xl font-bold mb-4 <?php echo $textColorClass; ?>">
                <?php echo htmlspecialchars($data['section_title']); ?>
            </h2>
            
            <!-- 副标题 -->
            <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-lg md:text-xl mb-8 <?php echo $subtitleColorClass; ?>">
                    <?php echo htmlspecialchars($data['section_subtitle']); ?>
                </p>
            <?php endif; ?>
            
            <!-- 按钮组 -->
            <div class="flex flex-col sm:flex-row gap-4 <?php echo $flexAlignmentClass; ?>">
                <!-- 主按钮 -->
                <a 
                    href="<?php echo htmlspecialchars($data['primary_button_link']); ?>" 
                    class="<?php echo $baseClass . ' ' . $data['primary_button_type'] ?? ''; ?>">
                    <?php if (!empty($data['primary_button_icon'])): ?>
                        <i class="fa <?php echo htmlspecialchars($data['primary_button_icon']); ?> mr-2"></i>
                    <?php endif; ?>
                    <?php echo htmlspecialchars($data['primary_button_text']); ?>
                </a>
                
                <!-- 次要按钮 -->
                    <?php if (!empty($data['secondary_button_text'])): ?>
                        <a 
                            href="<?php echo htmlspecialchars($data['secondary_button_link']); ?>" 
                            class="<?php echo $baseClass . ' ' . $data['secondary_button_type'] ?? ''; ?>">
                        <?php if (!empty($data['secondary_button_icon'])): ?>
                            <i class="fa <?php echo htmlspecialchars($data['secondary_button_icon']); ?> mr-2"></i>
                        <?php endif; ?>
                        <?php echo htmlspecialchars($data['secondary_button_text']); ?>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
    